<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>layedit编辑器新增可查看源码功能</title>
		<link rel="stylesheet" href="/public/layui/css/layui.css">
		<script src="/public/js/jquery.min.js"></script>
		<style>
			.app {
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div class="app">
			<h2>layedit编辑器新增可查看源码功能</h2>
			<br>
			<textarea id="yg_editor" style="display: none;"></textarea>
		</div>
	</body>
	<script src="/public/layui/layui.js"></script>
	<script>
		// 初始化富文本编辑器
		var layedit = null,
			index = null;
		layui.use('layedit', function() {
			layedit = layui.layedit;
			layedit.set({
				// 请求上传图片接口
				uploadImage: {
					url: '/uploader',
					type: 'post',
					success: function(res){
						console.log(res);
					}
				}
			});
			
			//建立编辑器
			index = layedit.build('yg_editor', {
				height: 400
			});
			
			// 通过官方的layedit创建方法获取到index后，调用以下方法添加显示源码功能
			setHtmlCodeToEdit('layui-layedit', index); //设置源码菜单
			
			// 在提交数据时，需要判断一下，如果是HTML编码的，解码后再提交数据到后台
			let context = layedit.getContent(index); //这里是前面获取到index
			if (context.length > 0) {
				if (context.indexOf('<') >= 0) { //需要进行解码
					$(document.getElementById("LAY_layedit_" + index)).contents().find("body").html(HtmlUtil.htmlDecode(context));
				}
				//同步到编辑框
				layedit.sync(index);
			}
		});


		//动态添加编辑器源码查看编辑功能
		function setHtmlCodeToEdit(ele,id) {
			$('.' + ele + ' .layui-layedit-tool').append(`
				<span class="layedit-tool-mid"></span>
				<i class="layui-icon layui-icon-code-circle" title="查看源码" style="font-size: 18px!important;" onclick="getHtml(this,'${id}')"></i> 
			`);
		}

		//显示原代码
		function getHtml(boj, index) {
			layui.use('layedit', function() {
				var layedit = layui.layedit,
					$ = layui.jquery;
				let context = layedit.getContent(index);
				if ($(boj).hasClass('layui-icon-code-circle')) {
					$(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body").html(HtmlUtil.htmlEncode(context));
					$(boj).removeClass("layui-icon-code-circle");
					$(boj).addClass("layui-icon-layouts");
					$(boj).attr("title", "查看HTML");
				} else if ($(boj).hasClass('layui-icon-layouts')) {
					$(document.getElementById("LAY_layedit_" + Number(index))).contents().find("body").html(HtmlUtil.htmlDecode(context));
					$(boj).removeClass("layui-icon-layouts");
					$(boj).addClass("layui-icon-code-circle");
					$(boj).attr("title", "查看源码")
				}
			});
		}

		var HtmlUtil = {
			/*1.用浏览器内部转换器实现html转码*/
			htmlEncode: function(html) {
				//1.首先动态创建一个容器标签元素，如DIV
				var temp = document.createElement("div");
				//2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
				(temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
				//3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
				var output = temp.innerHTML;
				temp = null;
				return output;
			},

			/*2.用浏览器内部转换器实现html解码*/
			htmlDecode: function(text) {
				//1.首先动态创建一个容器标签元素，如DIV
				var temp = document.createElement("div");
				//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
				temp.innerHTML = text;
				//3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
				var output = temp.innerText || temp.textContent;
				temp = null;
				return output;
			}
		};
	</script>
</html>
